<%--
  Created by IntelliJ IDEA.
  User: HelloKitty
  Date: 2021/5/23
  Time: 16:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<html>
<head>
    <%-- 用以说明主页制作所使用的文字以及语言 --%>
    <meta http-equiv="Content-Type" content="text/html" charset='UTF-8"'>
    <meta http-equiv="Content-Language" content="zh-CN">
    <title>测试SpringMVC的ajax功能</title>
    <%-- 1、配置项目路径 --%>
    <% pageContext.setAttribute("projectClassPath",request.getContextPath()); %>
    <%-- 3.1导入Jquery --%>
    <script src="webjars/jquery/1.12.3/dist/jquery.min.js" ></script>

</head>
<body>
<%-- 2、发一个form表单，用于测试SpringMVC中的@RequestBody注解：用于获取请求体的内容 --%>
<form action="${projectClassPath}/testRequestBody" method="post" enctype="multipart/form-data">
    <input name="name" value="nihao"/>
    <input name="password" value="123456" />
    <input type="file" name="file">
    <input type="submit" value="提交" />
</form>

<%-- 3.2 --%>
<a href="${projectClassPath}/testRequestBodyJson" >ajax：发送json请求</a>
<%-- 3、后端@RequestBody接收json数据自动封装为后端JavaBean对象
        使用ajax请求发送json数据
 --%>

<%-- 4、发一个form表单，用于测试SpringMVC中的HttpEntity<String>：用于获取【请求头】+【请求体】的内容 --%>
<form action="${projectClassPath}/testHttpEntity" method="post" enctype="multipart/form-data">
    <input name="name" value="nihao"/>
    <input name="password" value="123456" />
    <input type="file" name="file">
    <input type="submit" value="提交" />
</form>

</body>
<%-- 3.3使用js，发送ajax请求 --%>
<script type="text/javascript">
    // 点击发送ajax请求，请求携带的数据时json
    $("a:first").click(function () {
        //发送的数据：1）、创建js的对象
        var emp = {lastName:"张三",email:"aaa@aa.com",gender:1};
        //发送的数据：2）、将创建的js的对象emp转为json字符串，发给后端
        var empStr = JSON.stringify(emp);
        // jquery发送ajax请求
        $.ajax({
            url : "${projectClassPath}/testRequestBodyJson",
            type : "POST",
            data : empStr,
            contentType : "application/json",
            success : function (data) {
                alert(data);
            }
        });
        //禁用<a>标签的默认行为
        return false;
    });
</script>
</html>
